<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例4</title>
    <style>
        div {
            border: 1px solid red;
        }

        .left {
            float: left;
            /*width:45%;*/
            /*
                height: 400px;
            */
        }

        .right {
            /* width:50%;
             height: 200px;*/

        }
    </style>
</head>
<body>
<div style="width:1200px; height: 600px">
    <!--              shang             -->
        <div style="width:1200px; height: 400px">
            <!------------1             -->
            <div style="float:left;width:290px; height: 400px">

            </div>
            <!-------------2-      -->
            <div style="float:left;width:290px; height: 400px">

            </div>
            <!-- --- 3---->
            <div style="float:left;width:290px; height: 400px">
               <div style="width:290px; height: 190px">
                    <div style="float:left;width:140px; height: 190px">
                        <img src="3.webp" style="width: 140px;height: 190px">
                    </div>
                   <div style="float:left;width:140px; height: 190px">
                       <img src="4.webp" style="width: 140px;height: 190px">
                    </div>
                </div>
               <div style="width:290px; height: 190px">
                   <div style="float:left;width:140px; height: 190px">

                   </div>
                   <div style="float:left;width:140px; height: 190px">

                   </div>
                </div>
            </div>
            <!--       4         -->
            <div style="float:left;width:290px; height: 400px">

            </div>
        </div>
    <!------------------XIA-------------- -->
        <div style="width:1200px; height: 200px">

        </div>
</div>

</body>
</html>